<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { message } from 'ant-design-vue'
import { searchPicByPicUsingGet, userGetPicByIdUsingGet } from '@/api/fileController.ts'
import { useRoute } from 'vue-router'

const route = useRoute()
const loading = ref(true)
const picture = ref<API.PictureVO>({})
const searchPictureList = ref<API.ImageSearchResult[]>([])
const pictureId = computed(() => {
  return route.params?.pictureId
})

/**
 * 根据 id 查询图片信息（修复响应式和错误处理）
 */
async function getPictureById() {
  try {
    const id = route.params?.pictureId

    // 调用接口（确保接口参数格式正确，比如 id 是字符串）
    const resp = await userGetPicByIdUsingGet({ id: id })

    // 打印接口返回，确认数据格式（关键！排查接口是否返回正确数据）
    console.log('接口返回的图片数据：', resp.data)

    // 校验接口响应（按后端规范调整 code 值）
    if (resp.data.code === 0 && resp.data.data) {
      picture.value = resp.data.data
    } else {
      // 后端返回错误信息（比如 id 不存在）
      message.error(`查询失败：${resp.data.message || '未知错误'}`)
    }
  } catch (error) {
    // 捕获网络错误（比如接口 404、500，或请求超时）
    console.error('查询图片详情时发生网络错误：', error)
    message.error('网络异常，无法获取图片详情，请稍后重试')
  }
}

/**
 * 以图搜图结果
 */
async function doSearchPicture() {
  loading.value = true
  const id = route.params?.pictureId
  const resp = await searchPicByPicUsingGet({ id: id })
  if (resp.data.code === 0 && resp.data.data) {
    searchPictureList.value = resp.data.data
  } else {
    message.error(resp.data.message)
  }
  loading.value = false
}

onMounted(() => {
  getPictureById()
  doSearchPicture()
})
</script>

<template>
  <!--  以图搜图页面-->
  <div class="searchPicture">
    <h2 class="title">以图搜图</h2>
    <h3>原图</h3>
    <!--    展示原图-->
    <!-- 单张图片，添加点击事件 -->
    <a-card style="width: 240px">
      <template #cover>
        <img
          style="height: 180px; object-fit: cover"
          :alt="picture.name"
          :src="picture.thumbnailUrl ?? picture.url"
        />
      </template>
    </a-card>
    <h3 style="margin-top: 16px">识图结果</h3>
    <a-list
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }"
      :data-source="searchPictureList"
      :loading="loading"
    >
      <template #renderItem="{ item }">
        <a-list-item style="padding: 0">
          <!-- 单张图片，添加点击事件 -->
          <a-card hoverable>
            <template #cover>
              <img
                style="height: 180px; object-fit: cover; cursor: pointer"
                :alt="item.name"
                :src="item.thumbUrl ?? item.url"
              />
            </template>
          </a-card>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<style scoped></style>
